How to make a nice box of shell commands that show the prompt text and the command text but allows coping the shell commands without the shell prompt

Ok so this is a trick that involves two elements:

  1. An html box made from an html division element, that I describe here:
    How to make a nice quote field with a different background color in your WordPress blog post?
  2. A table with only one row and two columns. The first row has the prompt text and the second row has the command text. You don’t create multiple table rows. Instead, you only have one row and for line, both columns will use a html break.

Short version

<div style="width:90%;background-color:#363636;color:#ffffff;border-style:ridge;border-width:5px;padding:10px;font:courier-new">
<table><tr><td valign="top">
#
</td>
<td style="white-space: nowrap">
command 1
</td></tr></table>
</div>
# command 1

Long version

<div style="width:90%;background-color:#363636;color:#ffffff;font:courier-new;border-style:ridge;border-width:5px;padding:10px;">
<table><tr><td valign="top">
#<br />
#<br />
#<br />
#<br />
#<br />
#<br />
#<br />
#<br />
#<br />
</td>
<td style="white-space: nowrap">
command 1<br />
command 2<br />
command 3<br />
command 4<br />
command 5<br />
command 6<br />
command 7<br />
command 8<br />
</td></tr></table>
</div>

It looks like this:

#
#
#
#
#
#
#
#
#
command 1
command 2
command 3
command 4
command 5
command 6
command 7
command 8
command 1

And a good example of really using this trick with a little more complexity would be this example of logging into to FreeBSD as a user, then switching to run a shell as root and running commands.

<div style="width:500px;background-color:#363636;color:#ffffff;border-style:ridge;border-width:5px;padding:10px;">
<table><tr><td valign="top">$<td style="white-space: nowrap">su</td></tr></table>Password:
<table><tr><td valign="top">
ServerName#<br />
ServerName#<br />
ServerName#<br />
ServerName#<br />
</td><td style="white-space: nowrap">
freebsd-update fetch<br />
freebsd-update install<br />
portsnap fetch<br />
 portsnap extract<br />
</td></tr></table>
</div>
$

su

Password:

ServerName#
ServerName#
ServerName#
ServerName#
freebsd-update fetch
freebsd-update install
portsnap fetch
portsnap extract

You can easily make this green on black just by changing the color and background-color values in the division element.

<div style="width:500px;background-color:#000000;color:#00cc00;font:courier-new;border-style:ridge;border-width:5px;padding:10px;">
<table><tr><td valign="top">
$
</td><td style="white-space: nowrap">
su
</td></tr></table>

Password:

<table><tr><td valign="top">
ServerName#<br />
ServerName#<br />
ServerName#<br />
ServerName#<br />
</td><td style="white-space: nowrap">
freebsd-update fetch<br />
freebsd-update install<br />
portsnap fetch<br />
 portsnap extract<br />
</td></tr></table>
</div>

A green on black version would look like this.

$

su

Password:

ServerName#
ServerName#
ServerName#
ServerName#
freebsd-update fetch
freebsd-update install
portsnap fetch
portsnap extract

Leave a Reply

How to post code in comments?